<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false);
//创建数据模型
const registerData = ref({
	username: "",
	password: "",
	rePassword: "",
});
//自定义规则函数
const checkRePassword = (rule, value, callback) => {
	if (value === "") {
		callback(new Error("请再次输入密码！"));
	} else if (value !== registerData.value.password) {
		callback(new Error("两次输入的密码不同!"));
	} else {
		callback();
	}
};
//规则
const rules = {
	username: [
		{ required: true, message: "请输入用户名！", trigger: "blur" },
		{ min: 5, max: 16, message: "长度必须为5-16位的非空字符", trigger: "blur" },
	],
	password: [
		{ required: true, message: "请输入密码！", trigger: "blur" },
		{ min: 5, max: 16, message: "长度必须为5-16位的非空字符", trigger: "blur" },
	],
	rePassword: [{ validator: checkRePassword, trigger: "blur" }],
};
const successMessage = (successMessage) => {
	ElMessage({
		message: successMessage,
		type: "success",
	});
};
import { registerService, loginService } from "@/api/user.js";
const register = async () => {
	const result = await registerService(registerData.value);
	successMessage("注册成功");
};
import { useTokenStore } from "@/stores/token";
const tokenStore = useTokenStore();
const login = async () => {
	const result = await loginService(registerData.value);
	successMessage("登录成功");
	tokenStore.setToken(result.data);
	router.push("/");
};

//数据重置
const resetData = () => {
	registerData.value = {
		username: "",
		password: "",
		rePassword: "",
	};
};
</script>

<template>
	<el-row class="login-page">
		<el-col :span="12" class="bg"></el-col>
		<el-col :span="6" :offset="3" class="form">
			<div class="tit">
				<img src="@/assets/文章.png" />
				<p>文章管理系统</p>
			</div>
			<!-- 注册表单 -->
			<el-form
				ref="form"
				size="large"
				autocomplete="off"
				v-if="isRegister"
				:model="registerData"
				:rules="rules">
				<el-form-item>
					<h1>注册</h1>
				</el-form-item>
				<el-form-item prop="username">
					<el-input
						:prefix-icon="User"
						placeholder="请输入用户名"
						v-model="registerData.username"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						:prefix-icon="Lock"
						type="password"
						placeholder="请输入密码"
						v-model="registerData.password"></el-input>
				</el-form-item>
				<el-form-item prop="rePassword">
					<el-input
						:prefix-icon="Lock"
						type="password"
						placeholder="请输入再次密码"
						v-model="registerData.rePassword"></el-input>
				</el-form-item>
				<!-- 注册按钮 -->
				<el-form-item>
					<el-button
						class="button"
						type="primary"
						auto-insert-space
						@click="register">
						注册
					</el-button>
				</el-form-item>
				<el-form-item class="flex">
					<el-link
						type="info"
						:underline="false"
						@click="
							isRegister = false;
							resetData();
						">
						← 返回
					</el-link>
				</el-form-item>
			</el-form>
			<!-- 登录表单 -->
			<el-form
				ref="form"
				size="large"
				autocomplete="off"
				v-else
				:model="registerData"
				:rules="rules">
				<el-form-item>
					<h1>登录</h1>
				</el-form-item>
				<el-form-item prop="username">
					<el-input
						:prefix-icon="User"
						placeholder="请输入用户名"
						v-model="registerData.username"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						name="password"
						:prefix-icon="Lock"
						type="password"
						placeholder="请输入密码"
						v-model="registerData.password"></el-input>
				</el-form-item>
				<el-form-item class="flex">
					<div class="flex">
						<el-checkbox>记住我</el-checkbox>
						<el-link type="primary" :underline="false">忘记密码？</el-link>
					</div>
				</el-form-item>
				<!-- 登录按钮 -->
				<el-form-item>
					<el-button
						class="button"
						type="primary"
						auto-insert-space
						@click="login"
						>登录</el-button
					>
				</el-form-item>
				<el-form-item class="flex">
					<el-link
						type="info"
						:underline="false"
						@click="
							isRegister = true;
							resetData();
						">
						注册 →
					</el-link>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
	height: 100vh;
	background-color: #fff;

	.bg {
		background: url("@/assets/book.jpg") no-repeat center / cover;
		border-radius: 0 20px 20px 0;
	}

	.tit {
		display: flex;
		img {
			height: 50px;
		}
		p {
			position: relative;
			top: -30px;
			font-size: 30px;
			margin-left: 20px;
			color: rgb(86, 178, 147);
		}
	}

	.form {
		display: flex;
		flex-direction: column;
		justify-content: center;
		user-select: none;

		.title {
			margin: 0 auto;
		}

		.button {
			width: 100%;
		}

		.flex {
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>
